<template>
	<view class="searchBox">
		<!-- #ifdef MP -->
		<view class="status_bar"></view>
		<!-- #endif -->
		<u-sticky bgColor="#ffffff" :offsetTop="0">
			<view class="searchTop"><u-search @search="search" @custom="goback" @clear="clearSearch" placeholder="输入关键字"
					v-model="keyword" actionText="取消"></u-search></view>
			<u-tabs :current="tabCurrent" :list="tablist" :activeStyle="activeStyle" :inactiveStyle="inactiveStyle"
				:itemStyle="itemStyle" lineColor="#FF5900" lineWidth="32rpx" @click="changeTab"></u-tabs>
		</u-sticky>
		<view class="hospital" v-if="tabCurrent == 1">
			<!-- <HospitalItem :dataList="tablist[1].itemList"></HospitalItem> -->
		</view>
		<view class="hospital" v-else-if="tabCurrent == 2">
			<!-- <Server v-for="(item, index) in tablist[2].itemList" :key="index" :obj="item"></Server> -->
		</view>
		<view class="doctor" v-else>
			<!-- <Doctor :list="tablist[0].itemList"></Doctor> -->
		</view>
		<u-loadmore :status="tablist[tabCurrent].loadingType" />
	</view>
</template>

<script>
import { mapState } from 'vuex';
import pageMixin from '@/mixins/pageMixin';
import { medicalDoctor, localHospital, gerServerList } from '@/api/medical/medical.js';
// import Doctor from '@/pages/inquiry/components/doctor.vue';
// import HospitalItem from '@/components/HospitalItem/HospitalItem.vue'; // 附件医院
// import Server from './components/Server/server.vue';
export default {
	mixins: [pageMixin],
	components: {
		// Doctor,
		// Server,
		// HospitalItem
	},
	data () {
		return {
			//距离顶部距离
			statusBarHeight: null,
			keyword: '',
			tablist: [
				{
					name: '医生',
					loadingType: 'loadmore',
					itemList: [],
					pageNum: 1
				},
				{
					name: '医院',
					loadingType: 'loadmore',
					itemList: [],
					pageNum: 1
				},
				{
					name: '服务',
					loadingType: 'loadmore',
					itemList: [],
					pageNum: 1
				}
			], //类型
			tabCurrent: 0,
			itemStyle: {
				width: '33.3%',
				height: '100rpx'
			},
			activeStyle: {
				color: '#1A1A1A',
				fontSize: '32rpx',
				fontWeight: '500'
			},
			inactiveStyle: {
				fontSize: '30rpx',
				fontWeight: '400',
				color: '#1A1A1A'
			}
		};
	},
	computed: {
		...mapState('user', ['address'])
	},
	methods: {
		clearSearch () { },
		search () {
			if (!this.keyword) return uni.$u.toast('请输入关键词');
			this.loadData('refresh');
		},
		goback () {
			uni.navigateBack({
				delta: 1
			});
		},
		changeTab (e) {
			this.tabCurrent = e.index;
			this.loadData('tabChange');
		},
		//获取数据列表
		async loadData (type = 'add') {
			//这里是将数据挂载到tab列表下
			let navItem = this.tablist[this.tabCurrent];
			// 刷新
			if (type == 'refresh') {
				navItem.pageNum = 1;
				navItem.loadingType = 'loadmore';
			}
			// 切换tab
			if (type === 'tabChange' && navItem.loaded === true) {
				return; //loaded=true代表已经加载过切换tab时无需重新请求
			}
			if (navItem.loadingType === 'loading' || navItem.loadingType === 'nomore') {
				//防止重复加载
				return;
			}
			let params;
			let result;
			navItem.loadingType = 'loading';

			if (this.tabCurrent == 1) {
				// 医院
				params = {
					latitude: this.address ? this.address.latitude : null, //维度 //  31.834891
					longitude: this.address ? this.address.longitude : null, //经度 // 117.098929
					hospitalType: null,
					hospitalName: this.keyword,
					pageSize: 10,
					pageEnable: 1,
					pageNum: navItem.pageNum
				};
				result = await localHospital(params);
			} else if (this.tabCurrent == 2) {
				// 服务
				params = {
					name: this.keyword,
					pageSize: 10,
					pageEnable: 1,
					pageNum: navItem.pageNum
				};
				result = await gerServerList(params);
			} else {
				//医生
				params = {
					doctorName: this.keyword,
					pageSize: 10,
					pageEnable: 1,
					pageNum: navItem.pageNum
				};
				result = await medicalDoctor(params);
			}
			navItem.pageNum++;
			let itemList = result.list;

			if (this.tabCurrent == 1) {
				// 处理数据
				itemList.forEach(item => {
					item.current = 0;
					item.productCatalog.forEach(e => {
						e.list = item.hospitalProduct.filter(obj => obj.productType == e.code);
					});
				});
			}

			navItem.total = result.total;
			navItem.itemList = [...navItem.itemList, ...itemList];
			this.$forceUpdate();
			if (type == 'refresh') {
				navItem.itemList = itemList;
			}
			//loaded新字段用于表示数据是否已经加载过，如果为空可以显示空白页
			this.$set(navItem, 'loaded', true);

			//判断是否还有数据， 有改为 more， 没有改为noMore
			if (navItem.itemList.length >= result.total) navItem.loadingType = 'nomore';
			else navItem.loadingType = 'loadmore';
		}
	},
	onLoad (options) {
		if (options.keyword) this.keyword = options.keyword;
		this.loadData();
	},
	onReachBottom () {
		this.loadData();
	},
	created () {
		this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
	}
};
</script>

<style lang="scss">
page {
	background-color: #f7f8fa;
}

::v-deep .u-search__content {
	border-radius: 16rpx !important;
	height: 72rpx;
	line-height: 72rpx;
	background-color: #f5f7fa !important;
}

::v-deep .u-search__action {
	font-size: 32rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #666666;
}

::v-deep .u-search__content__input {
	font-size: 28rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #999999;
	background-color: #f5f7fa !important;
}

.status_bar {
	background-color: #ffffff;
}

.searchTop {
	padding: 10rpx 24rpx 0;
	display: flex;
	justify-content: left;
	align-items: center;
}

.hospital {
	background-color: #fff;
	padding: 24rpx;
}

.doctor {
	background-color: #f7f8fa;
}

// .footer-nav {
//   overflow: hidden;
// }
</style>
